<template>
  <div class="content">
    <n-h1>物流查询</n-h1>
    <n-input
        v-model:value="searchKey"
        style="width: 500px; margin-top: 10px" size="large"
        placeholder="请输入快递单号查询"
        @keydown.enter="onSearch"
        :maxlength="30"
    >
      <template #suffix>
        <n-icon @click="onSearch" :component="Search" class="cursor-pointer"></n-icon>
      </template>
    </n-input>
  </div>
  {{content}}
</template>

<script setup>
import {NInput, NH1, NIcon} from 'naive-ui'
import {Search} from '@vicons/ionicons5'
import {apiDelivery} from "@/common/api/index.js";
import {shallowRef,ref} from 'vue'

const searchKey = shallowRef('')
const content = ref('')
const onSearch = async () => {
  if(searchKey.value === '') return
  try {
    let params = {
      nu: searchKey.value
    }

    let res = await apiDelivery(params)
    if(res.code === 400) {
      throw res.msg
    }else {
      content.value = res.result
    }
  }catch(err) {
    console.log(err)
    $message.error(err)
  }

}

</script>

<style lang="scss" scoped>
.content {
  display: flex;
  //justify-content: center;
  padding: 50px 0 0 0;
  flex-direction: column;
  align-items: center;


  h1 {
    font-size: 31px;
  }
}
</style>
